<template>
	<view class="container">
		<view class="header-top">导 航</view>
		<view class="message-list">
		<view class="header">
			<map class="nav-map" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="14"></map>
		</view>
		<view class="station-info">
			<view class="info-content">
				<view class="text-content">
					<view class="station-name">{{ station.name }}</view>
					<view class="station-address">{{ station.address }}</view>
				</view>
				<button class="nav-btn">导航</button>
			</view>
		</view>
	</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const latitude = ref(34.826622)
const longitude = ref(113.556722)

const station = ref({
	name: '中国石油加油站',
	address: '山阳区人民路与解放路交叉口',
	latitude: 34.826622,
	longitude: 113.556722
})

const markers = ref([
	{
		id: 1,
		latitude: 34.826622,
		longitude: 113.556722,
		iconPath: '/static/whb/location.png',
		width: 32,
		height: 32
	}
])

// 接收页面参数
onLoad((options) => {
	if (options.latitude && options.longitude) {
		latitude.value = parseFloat(options.latitude)
		longitude.value = parseFloat(options.longitude)
		markers.value[0].latitude = latitude.value
		markers.value[0].longitude = longitude.value
	}
})
</script>

<style>
	.container {
		height: 200px;
		background-color: #007AFF;
	}

.header-top {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
		/* font-weight: bold; */
	}

	.message-list {
		background-color: white;
		margin: 30px 10px 0 10px;
	}


	.header {
		width: 100%;
		height: 85vh;
		position: relative;
	}

	.back-btn {
		position: absolute;
		top: 40rpx;
		left: 30rpx;
		z-index: 100;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 30rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-map {
		width: 100%;
		height: 100%;
	}

	.station-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.info-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-content {
		flex: 1;
		margin-right: 30rpx;
	}

	.station-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
		cursor: pointer;
	}

	.station-address {
		font-size: 28rpx;
		color: #666;
	}

	.nav-btn {
		min-width: 160rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #007AFF;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 40rpx;
		border: none;
		padding: 0 40rpx;
	}
</style>